<template>
<div>
  <div>
    <el-page-header @back="goBack" content="管理员管理">
    </el-page-header>
    <el-button type="primary" size="small" @click="dialogFormVisible=true">添加</el-button>
  </div>
  <div>
    <el-table
      :data="adminlist"
      border>
      <el-table-column
        prop="uid"
        label="用户编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="管理员名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="roleid"
        label="所属角色">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="item">
          <el-button 
            type="primary"
            icon="el-icon-edit"
            @click.native.prevent="editAdmin(item.row.uid)">
          </el-button>
          <el-button 
            type="danger"
            icon="el-icon-delete"
            @click.native.prevent="deleteAdmin(item.row.uid)">
          </el-button>
        </template>
      </el-table-column> 
    </el-table>
<el-pagination
  background
  layout="prev, pager, next"
  :total="10">
</el-pagination>
  </div>

  <el-dialog
    title="title"
    :visible.sync="dialogFormVisible"
    @close="resetForm">
    <el-form :model="form">
      <el-form-item label="用户名称" :label-width="formLabelWidth">
        <el-input v-model="form.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="所属角色" :label-width="formLabelWidth">
        <el-select v-model="form.roleid" placeholder="请选择上级菜单">
          <el-option
            v-for="item in rolelist"
            :key="item.id"
            :label="item.rolename"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码" :label-width="formLabelWidth">
        <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
      </el-form-item>
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch 
          v-model="form.status"
          active-value="1"
          inactive-value="2">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="addAdmin">确 定</el-button>
    </div>
  </el-dialog>
 
</div>
</template>

<script>
  // 引入辅助性函数
  import { mapGetters, mapActions } from 'vuex'

  // 引入接口
  import { adminAdd, adminDelete, adminInfo, adminEdit } from '../request/api.js'

  export default {
    name: 'Admin',
    data() {
      return {
        dialogFormVisible: false,
        formLabelWidth: '120px',
        title: '添加管理员',
        isAdd: true,
        total: 10,
        form: {
          roleid: 0,
          username: '',
          password: '123456',
          status: 1
        },
      }
    },
    computed: {
      ...mapGetters({
        adminlist: 'menu/getAdmin',
        rolelist: 'menu/getRole'
      })
    },
    methods: {
      goBack() {
        this.$router.push('home')
      },
      resetForm() {
        this.form = {
        roleid: 0,
        username: '',
        password: '123456',
        status: 1
       }
     },
     addAdmin() {
       this.dialogFormVisible = false
       if(this.isAdd) {
         adminAdd(this.form).then(res => {
           if(res.data.code == 200) {
             this.$message.success(res.data.msg)
             this.getAdmin()
           } else {
             this.$message.error(res.data.msg)
           }
         })
       } else {
         adminEdit(this.form).then(res => {
           if(res.data.code == 200) {
             this.$message.success(res.data.msg)
             this.getAdmin()
           } else {
             this.$message.error(res.data.msg)
           }
         }) 
       }
       this.resetForm()
     },
     editAdmin(uid) {
       this.dialogFormVisible = true
       this.isAdd = false
       this.title = '编辑管理员'
       adminInfo({ uid }).then(res => {
         this.form = res.data.list
       })
     },
     deleteAdmin(uid) {
       adminDelete({ uid }).then(res => {
         if(res.data.code == 200) {
           this.$message.success(res.data.msg)
           this.getAdmin()
         } else {
           this.$message.error(res.data.msg)
         }
       })  
     },
     ...mapActions({
       getAdmin: 'menu/getAdminAction',
       getRole: 'menu/getRoleAction'
     })
   },
  mounted() {
    this.getAdmin()
  }
 }
</script>
<style></style>